<template>
  <div class="je-rbac-saas-role-authorization">
    <panel>
      <panel-item region="left" v-bind="options.left">
        <AasaLeftTree
          :product-id="productData.productId"
          @getLeftTreeChecked="getLeftTreeChecked"
        />
      </panel-item>
      <panel-item v-bind="options.center">
        <CenterPanel :product-id="productData.productId" :left-role-id="leftRoleId" />
      </panel-item>
    </panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref } from 'vue';
  import { Panel } from '@jecloud/ui';
  import AasaLeftTree from './left-tree.vue';
  import CenterPanel from './center-panel.vue';
  export default defineComponent({
    name: 'AasaRoleAuthorization',
    components: { Panel, PanelItem: Panel.Item, AasaLeftTree, CenterPanel },
    props: {
      productData: Object,
    },
    setup() {
      debugger;
      const leftRoleId = ref('');
      const options = reactive({
        left: {
          split: true,
          size: 430,
          minSize: 430,
        },
        center: {
          style: {},
        },
      });
      const getLeftTreeChecked = ({ id }) => {
        leftRoleId.value = id;
      };
      return { options, getLeftTreeChecked, leftRoleId };
    },
  });
</script>

<style lang="less" scoped>
  .je-rbac-saas-role-authorization {
    border: 1px solid #e6e6e6;
    border-left: 0;
    border-top: 0;
    height: 100%;
  }
</style>
